<template>
  <div class="species-observation-result container-bottom-20">
    <CardBox title="物种观测记录"></CardBox>
    <div class="content-container">
      <el-table
        :data="tableData"
        :height="257"
        stripe
        @row-click="handleRowClick"
        style="width: 100%">
        <el-table-column
          prop="localName"
          label="设备名称"
          width="140"
          show-overflow-tooltip>
          <template #default="scope">
            <span class="ellipsis">{{ scope.row.localName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="spName"
          label="物种名称">
        </el-table-column>
        <el-table-column
          prop="fileTime"
          label="时间"
          width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import { EventBus } from '../../utils/event-bus'
export default {
  components: {
    CardBox
  },
  watch: {
    '$route.query': {
      handler(newQuery, oldQuery) {
        // 当路由的query参数发生变化时，执行这里的代码
        console.log('New query:', newQuery);
        console.log('Old query:', oldQuery);
        this.type=newQuery.deviceType;
        this.getResult();
      },
      deep: true, // 设置为true以深度观察对象内部的变化
      immediate: true // 组件创建时立即执行一次
    }
  },
  mounted() {
    this.type=this.$route.query.deviceType;
    this.$nextTick(() => {
      this.getResult();
    })
  },
  created() {
    EventBus.$on('sent-device-id-to-right', (message) => {
      this.deviceId = message.id;
      this.spName="";
      this.getResult();
    });
    // EventBus.$on('set-device-type', (message) => {
    //   this.type=message;
    //   this.spName="";
    //   this.getResult();
    // });
    EventBus.$on('select-species-name', (message) => {
      this.spName=message;
      this.getResult();
    })
  },
  data() {
    return {
      deviceId:'',
      spName:'',
      type:'hongwai',
      tableData: null
    }
  },
  methods: {
    getResult(){
      this.$api.species.getCollectList10(this.type,this.deviceId,this.spName).then(res => {
        this.tableData = res;
        EventBus.$emit('sent-record', this.tableData[0])
      });
    },
    handleRowClick(row, column, cell, event) {
      // 这里可以根据需要处理点击事件
      // 例如：显示详情弹窗、导航到其他页面等
      EventBus.$emit('sent-record', row)
    },
    updatespeciesResultData(deviceData){
      this.tableData = deviceData.datas
    }
  }
}
</script>

<style lang="scss" scoped>
.species-observation-result {
  .content-container {
    height: 242px;
    padding: 10px 0;
    margin-bottom: 20px;
  }

  :deep(.el-table) {
    background: transparent;
    font-size: 14px;
    
    &::before {
      display: none;
    }
    
    tr {
      background: transparent;
      height: 28px;
    }

    .el-table__body {
      tr {
        &.el-table__row--striped td {
          background: rgba(65, 123, 214, 0.19);
        }
        &:hover{
          td {
            color: #07FFE5 !important;
            background: rgba(65, 123, 214, 0.19) !important;
          }
        }
      }
    }
    
    th.el-table__cell {
      background: rgba(65, 123, 214, 0.19) !important;
      border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      color: #fff !important;
      font-weight: 500;
      padding: 4px 10px;
      height: 28px;
      line-height: 20px;
      
      &.is-leaf {
        border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      }

      &:hover {
        background: rgba(65, 123, 214, 0.19) !important;
        color: #fff !important;
      }
    }
    
    td.el-table__cell {
      background: transparent;
      border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      color: #fff;
      padding: 4px 10px;
      height: 28px;
      line-height: 20px;
      cursor: pointer;
      &:last-child{
        font-family: DIN Pro;
      }
    }

    .el-table__body tr.hover-row > td.el-table__cell {
      background: rgba(65, 123, 214, 0.19);
    }

    .el-table__body tr:hover > td.el-table__cell {
      background: rgba(65, 123, 214, 0.19);
    }

    .el-table__body-wrapper {
      overflow-x: hidden;
    }
  }
}
</style>
